<template>
  <div style="padding: 1%">
    <el-card style="max-width: 600px">

      <template #header>
              <div class="card-header">
                <span>个人信息</span>
              </div>
            </template>

    <el-form :model="form" label-width="auto" style="max-width: 400px">
      <el-form-item
        label="用户名"
        prop="username"
      >
        <el-input v-model="form.username" autocomplete="off" />
      </el-form-item>

      <el-form-item
        label="密码"
        prop="password"
      >
        <el-input
          v-model="form.password"
          type="password"
          show-password
          autocomplete="off"
        />
      </el-form-item>

      <el-form-item
        label="角色"
        prop="uType"
      >
        <el-select disabled v-model="form.uType" placeholder="选择角色">
          <el-option
              v-for="item in roleOptions"
              :key="item.id"
              :label="item.id + '-' + item.name"
              :value="item.id"
            /> 
          <!-- <el-option label="1-管理员" value="1" />
          <el-option label="2-普通员工" value="2" /> -->

        </el-select>
      </el-form-item>

      <el-form-item label="电话号码">
        <el-input v-model="form.phone" autocomplete="off" />
      </el-form-item>

      <el-form-item label="备注">
        <el-input v-model="form.remarks" autocomplete="off" />
      </el-form-item>
      <div class="dialog-footer">
      <el-button type="primary" @click="saveUser"> 提交 </el-button>

      <el-button @click="dialogFormVisible = false">取消</el-button>
    </div>
    </el-form>

   </el-card>
  </div>
</template>


<script setup>
import { ref, onMounted, computed, reactive } from "vue";
import { ElMessage } from "element-plus";
import * as userApi from "@/api/userApi";
import * as roleApi from "@/api/roleApi";
import { storeToRefs } from 'pinia'
import { useCounterStore } from "@/stores/counter";
const store = useCounterStore();



const tableData = ref([]);

const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

const dialogFormVisible = ref(false);

const dialogTitle = ref();

const roleOptions  = ref([]);

const form = reactive({
  id: null,
  username: "",
  password: "",
  uType: "",
  phone: "",
  remarks: "",
});

const queryUser = reactive({
  username: "",
  uType: "",
  phone: "",
  remarks: "",
  createTime: [],
  pageSize: pageSize.value,
  pageCurrent: currentPage.value,
});

function createUserBtn(show, title) {
  dialogFormVisible.value = show;
  form.username = null;
  form.password = null;
  form.phone = null;
  form.uType = null;
  form.remarks = null;
  form.id = null;
  dialogTitle.value = title;
}

function handleCurrentChange(currentPage) {
  queryUser.pageCurrent = currentPage;
  userApi.list(queryUser).then((response) => {
    if (response.data.code == 200) {
      tableData.value = response.data.data.records;
      total.value = response.data.data.total;
      pageSize.value = response.data.data.size;
    }
  });
}

function queryUserPage() {
  userApi.list(queryUser).then((response) => {
    if (response.data.code == 200) {
      tableData.value = response.data.data.records;
      total.value = response.data.data.total;
      pageSize.value = response.data.data.size;
    }
  });
}

function changeUser(data) {
  console.log(JSON.stringify(data));

  form.username = data.username;
  form.password = data.password;
  form.phone = data.phone;
  form.uType = data.uType;
  form.remarks = data.remarks;
  form.id = data.id;

  dialogFormVisible.value = true;
  dialogTitle.value = "修改用户";
}

// 禁用状态格式化
function statusFormatter(row, column) {
  if (row.status === 1) {
    return "正常";
  } else if (row.status === 0) {
    return "禁用";
  }
}
function uTypeFormatter(row, column) {
  if (row.uType === "1") {
    return "1-管理员";
  } else if (row.uType === "2") {
    return "2-普通用户";
  }
}

function saveUser() {
  if (form.id == null) {
    userApi.create(form).then((response) => {
      if (response.data.code == 200) {
        ElMessage("保存成功");
        dialogFormVisible.value = false;
        queryUserPage();
      }
    });
  } else {
    userApi.change(form).then((response) => {
      if (response.data.code == 200) {
        ElMessage("保存成功");
        dialogFormVisible.value = false;
        queryUserPage();
      } else {
        ElMessage(response.data.message);
      }
    });
  }
}

function remove(data) {
  userApi.remove(data).then((response) => {
    if (response.data.code == 200) {
      ElMessage("删除成功");
      queryUserPage();
    }
  });
}

function disable(data) {
  userApi.disable(data).then((response) => {
    if (response.data.code == 200) {
      ElMessage("成功");
      queryUserPage();
    }
  });
}

function handleSizeChange() {}

onMounted(() => {


  roleApi.list({}).then((response) => {
    if (response.data.code == 200) {
        roleOptions.value = response.data.data;
      //   roleOptions.value.forEach((item) => {
      //   roleMap.value[item.id] = item;
      // });
    }
  });

  userApi.getOne({id:store.id}).then((response) => {
    if (response.data.code == 200) {
      form.username = response.data.data.username;
      form.password = response.data.data.password;
      form.phone = response.data.data.phone;
      form.uType = response.data.data.uType;
      form.remarks = response.data.data.remarks;
      form.id = response.data.data.id;
    }
  });

});


</script>

<style>
</style>
